<template>
  <div class="card-wrap" @click="handleOpenDetail">
    <div class="title ellipsis" v-html="showTitle"></div>
    <div class="contetn-wrap">
      <div class="content">
        <div class="ellipsis" v-html="showContent"></div>
      </div>
      <img class="img-wrap" :src="image" alt="">
    </div>
    <div class="time">{{time}}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    },
    time: {
      type: String,
      default: '2025-01-26 21:41'
    },
    image: {
      type: String,
      default: ''
    },
    search: {
      type: String,
      default: ''
    },
    articleId: {
      type: String,
      default: ''
    },
    token: {
      type: String,
      default: ''
    }
  },
  computed: {
    showTitle() {
      if (this.search) {
        const regex = new RegExp(this.search, 'gi'); // 'g'表示全局匹配，'i'表示不区分大小写
        return this.title.replace(regex, `<span style="color: #00AFCB">${this.search}</span>`);
      }
      return this.title
    },
    showContent() {
      if (this.search) {
        const regex = new RegExp(this.search, 'gi'); // 'g'表示全局匹配，'i'表示不区分大小写
        return this.content.replace(regex, `<span style="color: #00AFCB">${this.search}</span>`);
      }
      return this.content
    }
  },
  methods: {
    handleOpenDetail() {
      console.log(this.token, '-=-=-=')
      if (this.token) {
        uni.navigateTo({
          url: `/pages/article-info/main?articleId=${this.articleId}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/login/main'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.card-wrap {
  width: 345px;
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin-bottom: 16px;
  .title {
    color: rgba(0, 0, 0, 0.85);
    font-family: "PingFang SC";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    line-height: 30px;
  }
  .content {
    color: rgba(0, 0, 0, 0.65);
    text-align: justify;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 12px;
    line-height: 24px;
    width: 185px;
  }
  .time {
    color: rgba(0, 0, 0, 0.65);
    text-align: justify;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 12px;
  }
}

.ellipsis {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.contetn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .img-wrap {
    width: 112px;
    height: 80px;
    border-radius: 8px;
  }
}
</style>